<template>
  <div>
    <input placeholder="输入关键字搜索" v-model="search" />
    <MyTable :list="showList" ></MyTable>
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue'
export default {
  components: {
    MyTable,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          udate: '2022-01-01',
          uname: '张三',
          res: '感冒',
          solution: '感冒药',
        },
        {
          id: 2,
          udate: '2022-02-01',
          uname: '李四',
          res: '头疼',
          solution: '止疼药',
        },
        {
          id: 3,
          udate: '2022-03-01',
          uname: '王五',
          res: '腰痛',
          solution: '止痛贴',
        },
      ],
      search: '',
    }
  },
  watch: {
    search: {
      handler(newval) {
        if (newval === '') {
          this.showList = this.list
        } else {
          this.showList = this.list.filter((item) => item.uname === this.search)
        }
      },
      immediate: true,
    },
  },
}
</script>

<style></style>